<template>
  <div>
    <el-drawer
      title="回复投诉"
      :visible.sync="drawer"
      direction="rtl"
      size="45%"
    >
      <el-tabs v-model="activeName">
        <el-tab-pane label="投诉内容" name="repairs">
          <el-form :model="formData" label-position="top">
            <el-row>
              <el-col :span="8">
                <el-form-item label="所属小区">
                  <SelectView v-model="formData.community_code" />
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item label="" />
              </el-col>
              <el-col :span="8">
                <el-form-item label="投诉名称">
                  <el-input v-model="formData.title" disabled size="small" placeholder="" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="联系方式">
                  <el-input v-if="formData.status==='0'" v-model="formData.tel" disabled size="small" placeholder="" />
                  <span v-else>匿名不显示</span>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item label="" />
              </el-col>

              <el-col :span="8">
                <el-form-item label="是否描述">
                  <div>
                    <el-radio v-model="formData.is_anonymity" disabled label="0">不匿名</el-radio>
                    <el-radio v-model="formData.is_anonymity" disabled label="1">匿名</el-radio>
                  </div>
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="投诉事由">
              <span>{{ formData.reason }}</span>
            </el-form-item>
            <el-form-item label="问题图片">
              <el-image
                v-if="formData.an_photo"
                style="width: 100px; height: 100px"
                :src="`${$webURL}${formData.an_photo}`"
                :preview-src-list="[`${$webURL}${formData.an_photo}`]"
              />
              <el-image
                v-else
                style="width: 100px; height: 100px"
                src="http://124.223.14.236:8881/public/dist/static/empty.1e2fbc24.png"
                :preview-src-list="srcList"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="btnOk">提交</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>

        </el-tab-pane>
        <el-tab-pane label="回复信息" name="reply">
          <el-form ref="form" :rules="formRules" :model="formData" label-position="top">
            <el-row>
              <el-col :span="8">
                <el-form-item label="处理状态" prop="status">
                  <div>
                    <el-radio v-model="formData.status" label="0">待受理</el-radio>
                    <el-radio v-model="formData.status" label="1">受理</el-radio>
                    <el-radio v-model="formData.status" label="2">已处理</el-radio>
                  </div>
                </el-form-item>
              </el-col>
              <el-col :span="2">
                <el-form-item label="" />
              </el-col>
              <el-col :span="8">
                <el-form-item label="回复图片">
                  <UploadImage v-model="formData.an_photo" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item label="回复内容" prop="reply">
              <!-- 富文本编辑器 -->
              <quill-editor v-model="formData.reply" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="btnOk">提交</el-button>
              <el-button>取消</el-button>
            </el-form-item>
          </el-form>
        </el-tab-pane>
      </el-tabs>

    </el-drawer>
  </div>
</template>

<script>
// require styles
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import SelectView from './selectView copy.vue'
import UploadImage from './upload-image.vue'
import { quillEditor } from 'vue-quill-editor'
import { echoComplainAPI, editComplainAPI } from '@/api/hujingbo/complain'
export default {
  name: 'RepairDrawer',
  components: {
    SelectView,
    UploadImage,
    quillEditor
  },
  data() {
    return {
      srcList: ['http://124.223.14.236:8881/public/dist/static/empty.1e2fbc24.png'],
      drawer: false,
      activeName: 'repairs',
      formData: {
        an_photo: '',
        community_code: '',
        desc: '',
        device_name: '',
        qu_photo: '',
        reply: '',
        status: '',
        tel: '',
        is_anonymity: ''
      },
      formRules: {
        status: [
          { required: true, message: '请选择活动区域', trigger: 'change' }
        ],
        reply: [
          { required: true, message: '请选择活动区域', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    // 回显
    async echoRepair(id) {
      const res = await echoComplainAPI(id)
      this.formData = res.data
      this.formData.status = String(res.data.status)
    },
    // 提交
    async btnOk() {
      await this.$refs.form.validate()
      await editComplainAPI(this.formData)
      this.$emit('btnOk')
      this.drawer = false
      this.$message.success('操作成功')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tabs{
    padding:0 30px;
}
  ::v-deep .ql-editor {
    height: 300px;
  }
</style>
